<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!--<base href="<%=basePath%>">-->
    <title>upload</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <link rel="stylesheet" type="text/css"
          href="../css/bootstrap.min.css"/>
    <style type="text/css">
        .add-one {
            width: 64px;
            height: 64px;
            background-color: #dfdfdf;
            border: dashed 1px #c0c0c0;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

        .res-lst{
            background-color: #28a4c9;
            padding: 16px 16px 0 16px;
        }

        .resource{
            height: 64px;
            background-color: #d0d5d8;
            margin-bottom: 16px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="col-lg-12">
        <input type="file" id="file" multiple accept="image/*" style="display: none" onchange="selectResource(this.files)"/>
        <div class="res-lst col-lg-12">
            <!--<div class="row">-->

            <!--</div>-->
        </div>
        <a id="addOneBtn" class="add-one" href="#">
            <span class="glyphicon glyphicon-plus">add</span>
        </a>
        <input type="hidden" name="${_csrf.parameterName}"
               value="${_csrf.token}"/>
        <button type="button" onclick="sendFiles()">Submit</button>
    </div>
</div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jQuery.md5.js"></script>
<script type="text/javascript">

    var currentFileObj = undefined;
    window.URL = window.URL || window.webkitURL;
    var resLst = undefined;
    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });

        currentFileObj = $("#firstResource");
        resLst = $(".res-lst");

        $("#addOneBtn")
            .click(
                function () {
                    $("#file").click();
                    //this.preventDefault();
                });
    });

    function selectResource(files){
        for (var i = 0; i < files.length; i++) {
//            var res = loadResource(files[i]);
//            currentFileObj.children(".echo").append(res);
//            currentFileObj.children(".name").append(files[i].name);
//            currentFileObj.children(".size").append(files[i].size+"bytes");
            var html = '<div class="resource row">\n' +
                '                <div class="echo col-lg-4"></div>\n' +
                '                <div class="name col-lg-4">'+files[i].name+'</div>\n' +
                '                <div class="size col-lg-4">'+files[i].size+'</div>\n' +
                '                <div class="close"></div>\n' +
                '            </div>'
            $(".res-lst").append(html);

            var reader = new FileReader();
            reader.onload = function (evt) {
                //console.log(evt.target.result);
            };
            reader.readAsBinaryString(files[i]);
        }
    }

    function removeFromParent(e) {
        $(e).parent().parent().remove();
    }

    function handleFiles(files) {
        if (files.length) {
//            loadResources(files);
        }
    }

    function loadResource(file) {
        var fileName = file.name;
        var pointIndex = fileName.lastIndex('.');
        var suffix = fileName.substring(pointIndex);
        console.log("file suffix :" + suffix);
        if (suffix == ".jpg" || suffix == ".png") {
            return loadImgResource(file);
        } else if (false) {

        } else if (false) {

        } else {

        }
    }

    /**
     * 加载图片资源
     */
    function loadImgReource(file) {
        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(file);
        img.classList.add("obj");
        img.file = file;
        img.height = 60;
        img.onload = function () {
            window.URL.revokeObjectURL(this.src);
        }
        return img;
    }

    function sendFiles() {
        console.log("submit button click");
        var imgs = document.querySelectorAll(".obj");
        console.log(imgs);
    }

//    xhr.upload.addEventListener("progress",
//        function (e) {
//
//        }, false);

    function fileOnLoad(e) {
        if (e.lengthComputable) {
            //console.log("element in onload life cycle:");
            //console.log(e);
            var percentage = Math.round((e.loaded * 100)
                / e.total);
            console.log(file.name + ' up to progress:'
                + percentage + '%');
        }
    }
</script>
</html>







